import ProjectsPage from '../../../src/pages/ProjectsPage.vue';
import { describe, it, expect, jest, beforeEach } from '@jest/globals';
import { createRouter, createWebHistory } from 'vue-router';
import { mount, shallowMount } from '@vue/test-utils';
import { Quasar, QLayout, QPageContainer, QPage } from 'quasar';

import routes from '../../../src/router/routes';
import { createPinia, defineStore } from 'pinia';
//import flushPromises from 'flush-promises';

jest.mock('src/boot/apollo', () => ({}));
jest.mock('../../../src/stores/kanvaso', () => ({
  useKanvasoStore: () => ({
    // @ts-ignore
    onGetKanvaso: jest.fn().mockResolvedValue({
      data: {
        /* подставьте ожидаемые данные */
      },
      loading: false,
    }),
    // Добавьте моки для других функций, если необходимо
  }),
}));

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

const pinia = createPinia();

describe('ProjectsPage', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = mount(
      {
        components: {
          ProjectsPage,
          QLayout,
          QPageContainer,
          QPage,
        },
        template: `
      <q-layout>
          <q-page-container>
            <q-page>
              <ProjectsPage />
            </q-page>
          </q-page-container>
        </q-layout>
    `,
      },
      {
        global: {
          plugins: [Quasar, router, pinia],
        },
      },
    );
  });
  it('renders "Ваша личная метавселенная"', () => {
    expect(wrapper.html()).toContain('Ваша личная метавселенная');
  });

  it('renders "Проекты пользователя"', () => {
    expect(wrapper.html()).toContain('Проекты пользователя');
  });

  it('renders "Управление вашими проектами"', () => {
    expect(wrapper.html()).toContain('Управление вашими проектами');
  });

  it('finds a button with "+Создать проект" label', () => {
    const button = wrapper.findComponent({ name: 'QBtn' });
    expect(button.exists()).toBe(true);
    expect(button.text()).toContain('+Создать проект');
    console.log(wrapper.html());
  });
  // Новый тестовый случай для проверки модального окна
  it('changes showCreateDialog state to true on "+Создать проект" button click', async () => {
    await wrapper.find('button:contains("+Создать проект")').trigger('click');
    await wrapper.vm.$nextTick(); // Дожидаемся обновления DOM
    console.log(wrapper.vm.showCreateDialog); // Логируем состояние для отладки
    expect(wrapper.vm.showCreateDialog).toBe(true);
  });

  // Тест на проверку наличия элементов в модальном окне
  // Предположим, что этот тест следует запускать только после успешного прохождения предыдущего теста
  it('contains specific elements within the create project dialog', async () => {
    // Убедитесь, что модальное окно уже открыто (либо имитируйте его открытие здесь же)
    const createDialog = wrapper.findComponent({ name: 'QDialog' }); // Адаптируйте селектор, если имя компонента отличается

    // Поскольку предыдущий тест показал, что .isVisible() не работает как ожидается, предлагается использовать другие проверки
    expect(wrapper.vm.showCreateDialog).toBe(true); // Убедитесь, что это действительно отражает состояние видимости диалога

    // Теперь проверяем, что текст содержит ожидаемые элементы
    expect(createDialog.text()).toContain('Создание проекта');
    expect(createDialog.text()).toContain('Название проекта');
    expect(createDialog.text()).toContain('Описание проекта');
    expect(createDialog.text()).toContain('Отмена');
    expect(createDialog.text()).toContain('Создать');
  });
});
